/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { PureComponent } from "react";
import { Input, List } from "antd";
import "./index.less";

const ListItem = List.Item;
const SearchInput = Input.Search;

class AddressSearch extends PureComponent {
  state = {
    currentValue: null,
    visible: false,
    list: null,
  };

  componentDidMount() {
    AMap.plugin(["AMap.Autocomplete"], () => {
      var autoOptions = {
        city: "全国",
      };
      this.autoComplete = new AMap.Autocomplete(autoOptions);
    });
  }

  clearTimeout = () => {
    this.timer && clearTimeout(this.timer);
  };

  componentWillUnmount() {
    this.clearTimeout();
  }

  hideList = data => {
    this.setState({
      visible: false,
      ...data,
    });
  };

  // 选择地址
  handleSelect = (data, value) => {
    this.clearTimeout();
    const { onSelect } = this.props;
    this.hideList({
      currentValue: value,
    });
    if (onSelect) {
      onSelect(data);
    }
  };

  handleSearch = val => {
    const { list } = this.state;
    if (list && val === this.searchValue) {
      this.setState({ visible: true });
      return;
    }
    this.autoComplete.search(val, (status, result) => {
      this.searchValue = val;
      this.setState({
        visible: true,
        list: result ? result.tips : null,
      });
    });
  };

  // 获取焦点
  handleFocus = e => {
    this.clearTimeout();
    const { value } = e.target;
    value && this.handleSearch(value);
  };

  // 输入关键字
  handleChange = e => {
    const value = e.target.value.trim();
    this.setState({
      currentValue: value,
    });
    this.handleSearch(value);
  };

  onFocus = () => {
    this.input && this.input.focus();
  };

  handleBlur = () => {
    this.timer = setTimeout(() => {
      this.hideList();
    }, 100);
  };

  render() {
    const { list, currentValue, visible } = this.state;
    return (
      <div className="map-address-search">
        <SearchInput
          ref={node => (this.input = node)}
          placeholder="输入地址关键字"
          onChange={this.handleChange}
          onFocus={this.handleFocus}
          onBlur={this.handleBlur}
          value={currentValue}
          // onSearch={this.handleSearch}
        />
        {visible &&
          list && (
            <List className="map-address-search-list">
              {list.map((item, index) => {
                const { address, district, name } = item;
                const showValue = `${name}`;
                const html = showValue.replace(currentValue, `<strong>${currentValue}</strong>`);
                return (
                  <ListItem
                    onClick={() => {
                      this.handleSelect(item, showValue);
                    }}
                    key={index}
                  >
                    <div className="map-address-tips">
                      <div>
                        <span
                          className="map-tips-name"
                          dangerouslySetInnerHTML={{ __html: html }}
                        />
                        {district && <span className="map-tips-district">{district}</span>}
                      </div>
                      <div className="map-tips-detail">{address}</div>
                    </div>
                  </ListItem>
                );
              })}
            </List>
          )}
      </div>
    );
  }
}

export default AddressSearch;
